<!DOCTYPE html>
<html style="height: 100%;">

<head lang="en">
    <meta charset="UTF-8">
    <title>VRS</title>
    <link rel="stylesheet" type="text/css" href="css/Stylesheet.css">
    <script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
    <style type="text/css">
    	body{
    		background:url('img/bodybg.jpg');
    	}
    	button {
	        padding: 5px 10px;
	        margin: 0px 3px;
	        background: #009bce;
	        border-radius: 4px;
	        border: 1px;
	        color: #fff;
	    }
	    .loginForm {
		    width: 350px;
		    margin: 20px auto;
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		}
		.loginwrapper{
			margin:auto;
			margin-top: 20px;
		}
		.bgcol{
			background: #8C8C8C;
		}
    </style>
    <script type="text/javascript">
    	function login() {
    		alert("注册成功，请登录");
    		location.href = "login.html";
    		
    		
    	}
    	function select(a) {
    		if(a == 2){
    			document.getElementById("chengban").style.display = "none";
    			document.getElementById("shoufang").style.display = "none";
				document.getElementById("fangke").style.display = "block";
    		}else if(a == 3){
				document.getElementById("fangke").style.display = "none";
				document.getElementById("shoufang").style.display = "none";
    			document.getElementById("chengban").style.display = "block";
    		}else if(a == 4){
				document.getElementById("fangke").style.display = "none";
				document.getElementById("shoufang").style.display = "block";
    			document.getElementById("chengban").style.display = "none";
    		}
    	}
    	window.onload = function () {
    			document.getElementById("chengban").style.display = "none";
    			document.getElementById("shoufang").style.display = "none";
				document.getElementById("fangke").style.display = "block";
    		
    	}
    </script>
</head>

<body>
	<script>
		$(function(){
			$(".mcode").click(function(){
				var phone = $(".phone").val();
				if(phone == ""){
					alert("手机号不能为空！");
					return false;
				}
				var num = 60;
					var inerval = setInterval(function(){
							num--;
							
							if(num<1){		
							
								clearInterval(inerval);
								$(".mcode").attr("disabled",false);
								$(".mcode").css("background","#009bce");
							$(".mcode").html("Get authentication code");
							}else{
							console.log(num);
							$(".mcode").attr("disabled","disabled");
							$(".mcode").css("background","#8C8C8C");
							$(".mcode").text("Get authentication code ("+num+")");
							}
						},1000)
				
				$.ajax({
					type:"get",
					url:"http://221.204.11.69:3006//api/v1/send_sms?phone="+phone+"&type=1",
					async:true,
					success:function(data){
						console.log(data);
					
					},
					error: function(e) {
					console.log("------------");
					console.log(e);
					} 
				});

			})
		})
		
		
		
	</script>
	
	<div style="position: fixed;right: 30px;bottom: 50px;">
		<figure style="text-align: center;">
			<img style="width:100px;" src="img/pad.png" />
			<p style="color:#ffffff;">Scan QR code to download APP<!-- 扫描二维码下载APP --></p>
		</figure>
	</div>
    <div class="loginwrapper">
    	<div id="loginLogo">
			<img src="img/TourTrax-Logo.png" alt="TourTrax.NET logo">
		</div>
		
		<div class="content" id="loginContainer">
			<div class="loginForm">
	            <label class="loginField">Login type:</label><br>
				<select id="select" style="width:210px;" class="loginInput" onchange="select(this[selectedIndex].value)">
					<option value="2">Guest</option>
					<option value="3">Host</option>
					<!--<option value="4">Interviewee</option>-->
				</select>
			</div>
			<div id="fangke">
				<div class="loginForm">
					<!-- 姓名 -->
		            <label class="loginField">Name:</label>
					<input name="user" type="text" id="" class="loginInput" style="width:210px;">
				</div>
				<div class="loginForm">
					<!-- 姓名 -->
		            <label class="loginField">Email:</label>
					<input name="user" type="text" id="" class="loginInput" style="width:210px;">
				</div>
				<div class="loginForm">
					<!-- 联系电话 -->
		            <label class="loginField">Mobile phone:</label>
					<input name="user" type="text"  class="loginInput phone" style="width:210px;">
				</div>
				<div class="loginForm" style="justify-content: flex-end;">
					<button class="mcode">Get authentication code</button>
				</div>
				<div class="loginForm">
					<!-- 验证码 -->
		            <label class="loginField">Code:</label>
					<input name="user" type="text" id="" class="loginInput" style="width:210px;">
				</div>
				<div class="loginForm">
					<!-- 证件类型 -->
		            <label class="loginField">ID type:</label>
					<select id="" style="width:210px;" class="loginInput">
						<option value="2">ID card</option>
					</select>
				</div>
				<div class="loginForm">
					<!-- 证件号码 -->
		            <label class="loginField">ID number:</label>
					<input name="user" type="text" id="" class="loginInput" style="width:210px;">
				</div>
				<div class="loginForm">
					<!-- 密码 -->
					<label class="passwordField">Password:</label>
	            	<input name="pas" type="password" id="" class="loginInput" style="width:210px;">
				</div>
				<div class="loginForm">
		            <label class="loginField">Confirmation password:</label>
					<input name="user" type="password" id="" class="loginInput" style="width:210px;">
				</div>
			</div>
			
			<div id="chengban">
				<div class="loginForm">
					<!-- 姓名 -->
		            <label class="loginField">Name:</label>
					<input name="user" type="text" id="" class="loginInput" style="width:210px;">
				</div>
				<div class="loginForm">
					<!-- 姓名 -->
		            <label class="loginField">Email:</label>
					<input name="user" type="text" id="" class="loginInput" style="width:210px;">
				</div>
				<div class="loginForm">
					<!-- 联系电话 -->
		            <label class="loginField">Mobile phone:</label>
					<input name="user" type="text" id="" class="loginInput phone" style="width:210px;">
				</div>
				<div class="loginForm" style="justify-content: flex-end;">
					<button class="mcode">Get authentication code</button>
				</div>
				<div class="loginForm">
					<!-- 验证码 -->
		            <label class="loginField">Code:</label>
					<input name="user" type="text" id="" class="loginInput" style="width:210px;">
				</div>
				<div class="loginForm">
					<!-- 证件类型 -->
		            <label class="loginField">ID type:</label>
					<select id="" style="width:210px;" class="loginInput">
						<option value="2">ID card</option>
					</select>
				</div>
				<div class="loginForm">
					<!-- 证件号码 -->
		            <label class="loginField">ID number:</label>
					<input name="user" type="text" id="" class="loginInput" style="width:210px;">
				</div>
				<div class="loginForm">
					<!-- 密码 -->
					<label class="passwordField">Password:</label>
	            	<input name="pas" type="password" id="" class="loginInput" style="width:210px;">
				</div>
				<div class="loginForm">
		            <label class="loginField">Confirmation password:</label>
					<input name="user" type="password" id="" class="loginInput" style="width:210px;">
				</div>
			</div>
			
			
			<div id="shoufang">
				<div class="loginForm">
					<!-- 承办商名称 -->
		            <label class="loginField">name:</label>
					<input name="user" type="text" id="" class="loginInput" style="width:210px;">
				</div>
					<!-- 联系电话 -->
				<div class="loginForm">
		            <label class="loginField">Mobile phone:</label>
					<input name="user" type="text" id="" class="loginInput" style="width:210px;">
				</div>
				<div class="loginForm">
		            <label class="loginField">The reception place:</label>
					<input name="user" type="text" id="" class="loginInput" style="width:210px;">
				</div>
				<div class="loginForm">
		            <label class="loginField">password:</label>
					<input name="user" type="password" id="" class="loginInput" style="width:210px;">
				</div>
				<div class="loginForm">
		            <label class="loginField">Confirmation password:</label>
					<input name="user" type="password" id="" class="loginInput" style="width:210px;">
				</div>
			</div>

			<div class="loginForm">
				<a href="login.html" style="text-decoration: underline;">Login In</a>
				<button onclick="login()">Sign up</button>
			</div>
		</div>
    </div>
</body>
    
</html>